<template>
  <div class="farm-card-main">
    <div class="page-top">
      <!-- 巡田记录 -->
      <el-button
        type="success"
        @click="dialogVisible = true"
        style="margin:10px"
        >发布巡田</el-button
      >
      <div>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-card
      :body-style="{
        padding: 0,
        margin:'10px',
        borderRadius: '10px',
        borderRadius: '14px'
      }" v-loading="tableLoading"
      shadow="always"
    >
      <!-- 巡田详情（弹窗页面待定） -->
      <div
        v-for="item in stockItemList"
        :key="item.id"
        @click="dialogVisible = true"
        class="list_"
      >
        <el-card
          :body-style="{
            padding: 0,
            margin: 0,
            borderRadius: '10px',
            borderRadius: '14px'
          }"
          shadow="always"
        >
          <!-- :type="miStatusColor(item.miStatus)" -->
          <div class="inspection_list">
            <div class="list-left">
              <div> <!-- <img :src="item.stateImg" alt="" width="90"> --></div>
              <div class="plant_infotop">
                <span
                  ><el-button class="fask-but" size="mini">{{
                    item.stateText
                  }}</el-button>
                 
                </span>
                <!-- 巡田状态 -->
                <span class="state">{{ item.inspection_state }}</span>
                <!-- 指派人 -->
                <span class="text">{{ item.designator }}</span>
              </div>
              <div class="core">
                <span>{{ item.CreationTime }}</span>
              </div>
            </div>
            <div class="list-rigth">
              <div class="handlebutton" @click="handle">
                <span>{{ item.handlebutton }}</span>
              </div>
              <div v-if="statecode == 1" class="handle-event" @click="handle">
                <span>{{ item.handle }}</span>
              </div>
              <div class="releasedate">
                <span>发布时间：{{ item.releasedate }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <Dialog
        :visible.sync="dialogVisible"
        title="发布巡田"
        @updateVisible="updateVisible"
      ></Dialog>
      <div
        class="flex-wrap"
        style="align-items: center;justify-content: center"
      >
        <page-plugin
          v-show="true"
          :pages="page.pages"
          :total="page.total"
          label="巡田记录"
          :page.sync="page.pageNo"
          :limit.sync="page.pageSize"
          @changePageNum="changePageNum"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import pagePlugin from "@/components/page-plugin";
import Dialog from "./inspection-dialog";
export default {
  components: {
    Dialog,
    "page-plugin": pagePlugin
  },
  data() {
    return {
      dialogVisible: false,
       tableLoading: false,
      // 分页
      page: {
        pages: 1,
        total: 1,
        pageNum: 1,
        pageSize: 10
      },
      stockItemList: [
        {
          inspection_state: "巡查中", //巡田状态
          designator: "张华生指派", //指派负责人
          CreationTime: "2021-5-21至2021年6月6日", //创建时间
          stateText: "进行中", //进行状态标识
          handlebutton: "取消", //取消或忽略按键
          releasedate: "2021-5-21", //发布时间
          handle: "处理" //处理按钮
        }
      ],
      // 选择状态
      value: "",
      options: [
        {
          value: 1,
          label: "进行中"
        },
        {
          value: 2,
          label: "待处理"
        },
        {
          value: 3,
          label: "正常"
        },
        {
          value: 4,
          label: "异常"
        }
      ],
      //处理状态按钮动态调色
      // miStatusColor: function(val) {
      //   if (val == "正常") {
      //     return "#eb9b3c";
      //   } else if (val == "异常") {
      //     return "#f33737";
      //   } else if (val == "进行中") {
      //     return "#11c26d";
      //   } else if (val == "已处理") {
      //     return "#16be7d";
      //   } else {
      //     return "info";
      //   }
      // },
      // colorConfirm: "", //按钮背景色
      state: "", //列表状态显示框
      statecode: "" //处理按键状态
    };
  },
  activated() {
    this.getDataList();
  },
  methods: {
    // 状态处理按键
    handle() {},
    //发布弹窗
    toeject() {
      this.Popup = true;
    },
    // 修改是否让页面显示与隐藏的事件
    updateVisible(val) {
      this.dialogVisible = val;
    },
    // 分页展示
    changePageNum(val) {
      console.log("修改页码时触发", val);
      this.page.pageNum = val.page;
      this.getTableList();
    },
    // 获取列表
    getDataList() {
      //   if (state == 0) {
      //     this.stateText = "正常";
      //   } else if (state == 0) {
      //     this.stateText = "异常";
      //   }
    }
  }
};
</script>

<style scoped>
.inspection_list {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px;
  /* border: 1px solid #c4cec9; */
}
.page-top {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.fask-but {
  font-size: 22rpx;
  margin: 0;
  color: #fff;
  background-color: #11c26d;
}
.plant_infotop {
  margin-bottom: 30px;
}
.state {
  font-weight: 700;
  font-size: 20px;
  margin: 10px 0 0 10px;
}
.text {
  padding: 3px 6px;
  margin: 0 10px 10px 30px;
  font-size: 14px;
  color: #11c26d;
  border: 1px solid #11c26d;
}
.core {
  margin: 0 15px;
  /* padding-left: 50px; */
}
/* .list_{
  display: flex;
  justify-content: space-between;
} */
.handlebutton {
  border: 1px solid rgba(248, 70, 58, 0.973);
  color: rgba(248, 70, 58, 0.973);
  font-size: 16px;
  padding: 3px 5px;
  margin-bottom: 30px;
  text-align: center;
  width: 60%;
}
.releasedate {
  color: rgba(170, 165, 165, 0.747);
  font-size: 13px;
}
.handle-event {
  background-color: rgb(65, 141, 94);
  color: #fff;
  font-size: 16px;
  padding: 3px 5px;
  margin-bottom: 30px;
  text-align: center;
  width: 60%;
}
.flex-wrap {
  margin: 15px 0;
  display: flex;
  align-items: center;
}
</style>
